<template>
  <div>
    <el-card class="box-card" shadow="never" border="false">
  <template #header>
    <div class="header">
      <span class="name">学科名称</span>
      <el-input class="search" v-model="input" ></el-input>
      <el-button @click="clear">清空</el-button>
      <el-button type="primary" @click="searchName">搜索</el-button>
      <el-button style="float: right" type="success" @click="open('add')"> <svg-icon icon-class="edit"></svg-icon> 新增学科</el-button>
    </div>
    <el-alert
    :title="`共 ${total} 条记录`"
    effect="dark"
    :closable="false"
    show-icon
    type="info">
  </el-alert>
  </template>
 <el-table :data="tableData" stripe style="width: 100%"  v-loading="loading"    highlight-current-row>
      <el-table-column prop="id" label="序号" width="100" ></el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="100"   ></el-table-column>
          <el-table-column prop="username" label="创建者" header-align="center" align="center" > </el-table-column>
          <el-table-column prop="addDate" label="创建日期" header-align="center" align="center" > </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示" header-align="center" align="center" >
            <template #default="{ row }">
               <span>{{row.isFrontDisplay?'是':'否'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"  header-align="center" align="center"></el-table-column>
            <el-table-column prop="tags" label="标签" header-align="center" align="center" >
          </el-table-column>
            <el-table-column prop="totals" label="题目数量" header-align="center" align="center" >
          </el-table-column>
          <el-table-column label="操作" width="300" header-align="center" align="center">
            <template #default="{ row }">
              <div class="actions">
                <el-button  type="text" @click="$router.push({name:'subjects-directorys',params:{id:row.id}})" >学科分类</el-button>
                 <el-button  type="text"  @click="$router.push({name:'subjects-tags',params:{id:row.id}})" >学科标签</el-button>
                  <el-button  type="text"  @click="open('edit',row.id)">修改</el-button>
                  <el-button type="text"   @click="del(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

     <div class="pagination">   <PageTool :total="total"
         :paginationPage="queryObj.page"
         :paginationPagesize="queryObj.pagesize"
         @pageChange="onPageChange"
         @pageSizeChange="onPageSizeChange"
        ></PageTool>
        </div>
</el-card>
  <SubjectsAdd
  ref="editSubject"
  :dialogShow.sync="dialogShow"
  :pageTitle='pageTitle'
  ></SubjectsAdd>
  </div>
</template>

<script>
import { getNewDate } from '@/utils'
import SubjectsAdd from '@/module-hmmm/components/subjects-add'
import PageTool from '@/module-manage/components/page-tool'
import { list, remove } from '@/api/hmmm/subjects.js'
export default {
  components: {
    SubjectsAdd,
    PageTool
  },
  data () {
    return {
      loading: false,
      input: '',
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 10
      },
      type: '',
      dialogShow: false

    }
  },
  async created () {
    this.initData()
  },
  methods: {
    async initData () {
      this.loading = true
      const res = await list(this.queryObj)

      this.tableData = res.data.items
      this.total = res.data.counts
      this.loading = false
      this.tableData.forEach(item => {
        item.addDate = getNewDate(item.addDate)
      })
    },
    onPageSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    onPageChange (val) {
      this.queryObj.page = val
      this.initData()
    },
    async del (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = { id }
        await remove(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async  open (type, id) {
      this.dialogShow = true
      this.type = type

      if (this.type === 'edit') {
        this.$refs.editSubject.hanldeEditForm(id)
      }
    },
    clear () {
      this.input = ''
      this.initData()
    },
    searchName () {
      this.$nextTick(() => {
        this.tableData = this.renderList
      })
    }
  },
  computed: {
    pageTitle () {
      if (this.type === 'add') return '新增学科'
      if (this.type === 'edit') return '修改学科'
      else return 'add'
    },
    renderList () {
      return this.tableData.filter(item => item.subjectName.includes(this.input))
    }
  }
}
</script>
<style scoped lang='less'>
/deep/ .el-alert--info.is-dark{
  background-color: #f4f4f5;
  color:#909399
}
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card{
  margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
     .pagination{
  margin-top: 10px;
  float: right;
 }
}
 .header{

  margin-bottom: 10px;
  /deep/ .name{
    font-weight: 999;
    color: #626066;
  }
  .search{
  width: 200px;
  margin: 10px;
 }
 }
</style>
